import { FC, useState } from 'react'
import styles from './QuestionCard.module.scss'
import { Button, Divider, message, Modal, Popconfirm, Space, Tag } from 'antd'
import { Link, useNavigate } from 'react-router-dom'
import {
  CopyOutlined,
  DeleteOutlined,
  EditOutlined,
  ExclamationCircleOutlined,
  LineChartOutlined,
  StarOutlined,
} from '@ant-design/icons'
import { useRequest } from 'ahooks'
import { duplicateQuestionService, updateQuestionService } from '../services/question'

type PropsType = {
  _id: string
  title: string
  isStar: boolean
  isPublished: boolean
  answerCount: number
  createdAt: string
}

const { confirm } = Modal

const QuestionCard: FC<PropsType> = (props: PropsType) => {
  const { _id, title, createdAt, answerCount, isPublished, isStar } = props

  const nav = useNavigate()

  const [isStarState, setIsStarState] = useState(isStar)
  const { run: changeStar, loading: changeStarLoading } = useRequest(
    async () => await updateQuestionService(_id, { isStar: !isStarState }),
    {
      manual: true,
      onSuccess: () => {
        setIsStarState(prev => !prev)
        message.success('已更新')
      },
    }
  )

  // function duplicate() {}
  const { run: duplicate, loading: duplicateLoading } = useRequest(async () => await duplicateQuestionService(_id), {
    manual: true,
    onSuccess: result => {
      const { id } = result
      message.success('复制成功')
      nav({ pathname: `/question/edit/${id}` })
    },
  })

  const [isDeleted, setIsDeleted] = useState(false)
  const { run: deleteQuestion, loading: deleteLoading } = useRequest(
    async () => updateQuestionService(_id, { isDelete: true }),
    {
      manual: true,
      onSuccess: () => {
        message.success('删除')
        setIsDeleted(true)
      },
    }
  )
  function del() {
    confirm({
      title: '确定删除该问卷吗？',
      icon: <ExclamationCircleOutlined />,
      onOk: () => deleteQuestion(),
    })
  }

  if (isDeleted) return null

  return (
    <div className={styles.container}>
      <div className={styles.title}>
        <div className={styles.left}>
          <Link to={isPublished ? `/question/stat/${_id}` : `/question/edit/${_id}`}>
            <Space>
              {isStarState && <StarOutlined style={{ color: 'red' }} />}
              {title}
            </Space>
          </Link>
        </div>
        <div className={styles.right}>
          <Space>
            {isPublished ? <Tag color="processing">已发布</Tag> : <Tag>未发布</Tag>}
            <Tag>答卷：{answerCount}</Tag>
            <Tag>{createdAt}</Tag>
          </Space>
        </div>
      </div>
      <Divider style={{ margin: '12px' }} />
      <div className={styles['button-container']}>
        <div className={styles.left}>
          <Space>
            <Button
              type="text"
              size="small"
              icon={<EditOutlined />}
              onClick={() => nav({ pathname: `/question/edit/${_id}` })}
            >
              编辑问卷
            </Button>
            <Button
              type="text"
              size="small"
              icon={<LineChartOutlined />}
              onClick={() => nav({ pathname: `/question/stat/${_id}` })}
              disabled={isPublished ? false : true}
            >
              数据统计
            </Button>
          </Space>
        </div>
        <div className={styles.right}>
          <Space>
            <Button type="text" icon={<StarOutlined />} size="small" onClick={changeStar} disabled={changeStarLoading}>
              {isStarState ? '取消标星' : '标星'}
            </Button>
            <Popconfirm title="确定复制该问卷？" okText="确定" cancelText="取消" onConfirm={duplicate}>
              <Button type="text" icon={<CopyOutlined />} disabled={duplicateLoading}>
                复制
              </Button>
            </Popconfirm>
            <Button type="text" icon={<DeleteOutlined />} onClick={del} disabled={deleteLoading}>
              删除
            </Button>
          </Space>
        </div>
      </div>
    </div>
  )
}

export default QuestionCard
